<template>
    <div>
        <br/>
        <br/>
        <br/>
        <Head ref="steps" style="size:50px"></Head>
        <el-divider content-position="center">
            <h1>个人信息</h1>
        </el-divider>
        <el-form ref="personForm" :rules="personFormRules" :model="personForm" size="medium" label-width="410px">
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="personForm.userName" placeholder="请输入用户名" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="手机号1" prop="userPhone1">
                <el-input v-model="personForm.userPhone1" placeholder="请输入手机号1" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="手机号2" prop="userPhone2">
                <el-input v-model="personForm.userPhone2" placeholder="请输入手机号2" :maxlength="11" show-word-limit
                    clearable prefix-icon='el-icon-mobile' :style="{width: '30%'}"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="userSex">
                <el-radio-group v-model="personForm.userSex" size="medium">
                    <el-radio v-for="(item, index) in genderOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="身份证号码" prop="idcard">
                <el-input v-model="personForm.idcard" placeholder="请输入身份证号码" clearable :style="{width: '40%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="学历" prop="education">
                <el-select v-model="personForm.education" placeholder="请选择学历" clearable :style="{width: '20%'}">
                    <el-option v-for="(item, index) in educationOptions" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input-number v-model="personForm.age" placeholder="年龄"></el-input-number>
            </el-form-item>
            <el-form-item label="婚姻状况" prop="maritalStatus">
                <el-radio-group v-model="personForm.maritalStatus" size="medium">
                    <el-radio v-for="(item, index) in maritalStatusOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="有无子女" prop="familyStatus">
                <el-radio-group v-model="personForm.familyStatus" size="medium">
                    <el-radio v-for="(item, index) in childrenOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="personForm.email" placeholder="请输入邮箱" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="qq号" prop="qqNum">
                <el-input v-model="personForm.qqNum" placeholder="请输入qq号" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="微信号" prop="wechat">
                <el-input v-model="personForm.wechat" placeholder="请输入微信号" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="家人是否知晓" prop="familyKnows">
                <el-radio-group v-model="personForm.familyKnows" size="medium">
                    <el-radio v-for="(item, index) in familyknowsOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <el-divider content-position="center">
            <h1>居住信息</h1>
        </el-divider>
        <el-form ref="livingForm" :rules="livingFormRules" :model="livingForm" size="medium" label-width="410px">
            <el-form-item label="居住情况" prop="livingSituation">
                <el-select v-model="livingForm.livingSituation" placeholder="请选择居住情况" clearable :style="{width: '20%'}">
                    <el-option v-for="(item, index) in livingSituationOptions" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="现居住地" prop="currentAddress">
                <el-input v-model="livingForm.currentAddress" placeholder="请输入现居住地" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="detailedAddress">
                <el-input v-model="livingForm.detailedAddress" placeholder="请输入详细地址" clearable :style="{width: '45%'}">
                </el-input>
            </el-form-item>
            <el-form-item label=" 现居住时长" prop="liveTime">
                <el-input v-model="livingForm.liveTime" placeholder="请输入现居住时长" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="住宅电话" prop="homePhone">
                <el-input v-model="livingForm.homePhone" placeholder="请输入住宅电话" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
        </el-form>
        <el-divider content-position="center">
            <h1>资产信息</h1>
        </el-divider>
        <el-form ref="assetsForm" :rules="assetsFormRules" :model="assetsForm" size="medium" label-width="410px">
            <el-form-item label="房产" prop="house">
                <el-input v-model="assetsForm.house" placeholder="请输入房产信息" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="数量" prop="h_number">
                <el-input v-model="assetsForm.h_number" placeholder="请输入房产数量" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="车产" prop="car">
                <el-input v-model="assetsForm.car" placeholder="请输入车产信息" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="数量" prop="c_number">
                <el-input v-model="assetsForm.c_number" placeholder="请输入车产数量" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="个人年收入" prop="income">
                <el-input v-model="assetsForm.income" placeholder="请输入个人年收入" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
        </el-form>
        <el-divider content-position="center">
            <h1>联系人信息</h1>
        </el-divider>
        <el-form ref="contactForm" :rules="contactFormRules" :model="contactForm" size="medium" label-width="410px">
            <el-form-item label="联系人名字" prop="contactName">
                <el-input v-model="contactForm.contactName" placeholder="请输入联系人名字" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="工作单位" prop="workUnits">
                <el-input v-model="contactForm.workUnits" placeholder="请输入工作单位" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="contactPhone">
                <el-input v-model="contactForm.contactPhone" placeholder="请输入联系电话" :maxlength="11" show-word-limit
                    clearable prefix-icon='el-icon-mobile' :style="{width: '30%'}"></el-input>
            </el-form-item>
            <el-form-item label="关系" prop="contactRelationship">
                <el-select v-model="contactForm.contactRelationship" placeholder="请选择关系" clearable
                    :style="{width: '30%'}">
                    <el-option v-for="(item, index) in contact_relationshipOptions" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-divider content-position="center">
            <h1>工作信息</h1>
        </el-divider>
        <el-form ref="workForm" :rules="workFormRules" :model="workForm" size="medium" label-width="410px">
            <el-form-item label="参加工作时间" prop="workDate">
                <el-date-picker v-model="workForm.workDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{width: '30%'}" placeholder="请选择参加工作时间" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="工作单位" prop="workUnits">
                <el-input v-model="workForm.workUnits" placeholder="请输入工作单位" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="是否缴纳社保" prop="paySocial">
                <el-radio-group v-model="workForm.paySocial" size="medium">
                    <el-radio v-for="(item, index) in pay_socialOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否缴纳公积金" prop="payAccumulation">
                <el-radio-group v-model="workForm.payAccumulation" size="medium">
                    <el-radio v-for="(item, index) in pay_accumulationOptions" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="现在公司地址（简）" prop="companyAddress">
                <el-input v-model="workForm.companyAddress" placeholder="请输入现在公司地址（简）" clearable
                    :style="{width: '40%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="公司详细地址" prop="detailedAddress">
                <el-input v-model="workForm.detailedAddress" type="textarea" placeholder="请输入公司详细地址"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '40%'}"></el-input>
            </el-form-item>
            <el-form-item label="单位电话" prop="companyPhone">
                <el-input v-model="workForm.companyPhone" placeholder="请输入单位电话" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="公司部门" prop="department">
                <el-input v-model="workForm.department" placeholder="请输入公司部门" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="公司职位" prop="position">
                <el-input v-model="workForm.position" placeholder="请输入公司职位" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="公司性质" prop="companyNature">
                <el-input v-model="workForm.companyNature" placeholder="请输入公司性质" clearable :style="{width: '30%'}">
                </el-input>
            </el-form-item>
            <el-form-item label="该公司入职时间" prop="entryDate">
                <el-date-picker v-model="workForm.entryDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    :style="{width: '30%'}" placeholder="请输入该公司入职时间" clearable></el-date-picker>
            </el-form-item>
        </el-form>
        <br />
        <br />
        <div class="btn">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>
        <br />
        <br />
        <br />
    </div>
</template>
<script>
import Head from "../loan/loanHead.vue"
import { addAsset, addCareer, addContact, addLiving, addLoanUser, findAsset, findCareer, findContact, findLiving, findLoanUser } from "../../../api/apply2/index"
export default {
    components: {},
    props: [],
    data() {
        return {
            personForm: {
                id:'',
                userName: '',
                userPhone1: '',
                userPhone2: '',
                userSex: '男',
                idcard: '',
                education: '',
                age: 18,
                maritalStatus: '',
                familyStatus: '',
                email: '',
                qqNum: '',
                wechat: '',
                familyKnows: '',
            },
            livingForm: {
                livingSituation: '',
                currentAddress: '',
                detailedAddress: '',
                liveTime: '',
                homePhone: '',
            },
            assetsForm: {
                house: '',
                h_number: '',
                car: '',
                c_number: '',
                income: '',
            },
            contactForm: {
                contactName: '',
                workUnits: '',
                contactPhone: '',
                contactRelationship: '',
            },
            workForm: {
                workDate: null,
                workUnits: '',
                paySocial: '',
                payAccumulation: '',
                companyAddress: '',
                detailedAddress: '',
                companyPhone: '',
                department: '',
                position: '',
                companyNature: '',
                entryDate: null,
            },
            personFormRules: {
                userName: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }],
                userPhone1: [{
                    required: true,
                    message: '请输入手机号1',
                    trigger: 'blur'
                }, {
                    pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                    message: '手机号格式错误',
                    trigger: 'blur'
                }],
                userSex: [{
                    required: true,
                    message: '性别不能为空',
                    trigger: 'change'
                }],
                idcard: [{
                    required: true,
                    message: '请输入身份证号码',
                    trigger: 'blur'
                }],
                education: [{
                    required: true,
                    message: '请选择学历',
                    trigger: 'change'
                }],
                age: [],
                maritalStatus: [{
                    required: true,
                    message: '婚姻状况不能为空',
                    trigger: 'change'
                }],
                familyStatus: [{
                    required: true,
                    message: '有无子女不能为空',
                    trigger: 'change'
                }],
                email: [{
                    required: true,
                    message: '请输入邮箱',
                    trigger: 'blur'
                }],
                familyKnows: [{
                    required: true,
                    message: '家人是否知晓不能为空',
                    trigger: 'change'
                }]
            },
            livingFormRules: {
                livingSituation:[{
                    required: true,
                    message: '请选择居住情况',
                    trigger: 'change'
                }],
                currentAddress: [{
                    required: true,
                    message: '请输入现居住地',
                    trigger: 'blur'
                }],
                detailedAddress: [{
                    required: true,
                    message: '请输入详细地址',
                    trigger: 'blur'
                }],
                liveTime: [{
                    required: true,
                    message: '请输入现居住时长',
                    trigger: 'blur'
                }],
            },
            assetsFormRules: {
                house: [{
                    required: true,
                    message: '请输入房产信息',
                    trigger: 'blur'
                }],
                car: [{
                    required: true,
                    message: '请输入车产信息',
                    trigger: 'blur'
                }],
                income: [{
                    required: true,
                    message: '请输入个人年收入',
                    trigger: 'blur'
                }],
            },
            contactFormRules: {
                contactName: [{
                    required: true,
                    message: '请输入联系人名字',
                    trigger: 'blur'
                }],
                workUnits: [{
                    required: true,
                    message: '请输入工作单位',
                    trigger: 'blur'
                }],
                contactPhone: [{
                    required: true,
                    message: '请输入联系人手机号',
                    trigger: 'blur'
                }, {
                    pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                    message: '手机号格式错误',
                    trigger: 'blur'
                }],
                contactRelationship: [{
                    required: true,
                    message: '请选择关系',
                    trigger: 'change'
                }],
            },
            workFormRules: {
                workDate: [{
                    required: true,
                    message: '请选择参加工作时间',
                    trigger: 'change'
                }],
                workUnits: [{
                    required: true,
                    message: '请输入工作单位',
                    trigger: 'blur'
                }],
                paySocial: [{
                    required: true,
                    message: '是否缴纳社保不能为空',
                    trigger: 'change'
                }],
                payAccumulation: [{
                    required: true,
                    message: '是否缴纳公积金不能为空',
                    trigger: 'change'
                }],
                companyAddress: [{
                    required: true,
                    message: '请输入现在公司地址（简）',
                    trigger: 'blur'
                }],
                detailedAddress: [{
                    required: true,
                    message: '请输入公司详细地址',
                    trigger: 'blur'
                }],
                companyPhone: [{
                    required: true,
                    message: '请输入单位电话',
                    trigger: 'blur'
                }],
                department: [{
                    required: true,
                    message: '请输入公司部门',
                    trigger: 'blur'
                }],
                position: [{
                    required: true,
                    message: '请输入公司职位',
                    trigger: 'blur'
                }],
                companyNature: [{
                    required: true,
                    message: '请输入公司性质',
                    trigger: 'blur'
                }],
                entryDate: [{
                    required: true,
                    message: '请输入该公司入职时间',
                    trigger: 'blur'
                }],
            },
            genderOptions: [{
                "label": "男",
                "value": "1"
            }, {
                "label": "女",
                "value": "2"
            }],
            educationOptions: [{
                "label": "高中及以下",
                "value": "1"
            }, {
                "label": "大专",
                "value": "2"
            }, {
                "label": "本科",
                "value": "3"
            }, {
                "label": "硕士及以上",
                "value": "4"
            }],
            livingSituationOptions: [{
                "label": "租房",
                "value": "1"
            }, {
                "label": "个人住宅",
                "value": "2"
            }, {
                "label": "无房",
                "value": "3"
            }],
            maritalStatusOptions: [{
                "label": "已婚",
                "value": "1"
            }, {
                "label": "单身",
                "value": "2"
            }],
            childrenOptions: [{
                "label": "有",
                "value": "1"
            }, {
                "label": "无",
                "value": "2"
            }],
            familyknowsOptions: [{
                "label": "知道",
                "value": "1"
            }, {
                "label": "不知道",
                "value": "2"
            }],
            contact_relationshipOptions: [{
                "label": "亲人",
                "value": "1"
            }, {
                "label": "夫妻",
                "value": "2"
            }, {
                "label": "朋友",
                "value": "3"
            }],
            pay_socialOptions: [{
                "label": "是",
                "value": "1"
            }, {
                "label": "否",
                "value": "2"
            }],
            pay_accumulationOptions: [{
                "label": "是",
                "value": "1"
            }, {
                "label": "否",
                "value": "2"
            }],
        }
    },
    computed: {},
    watch: {},
    components: { Head },
    created() {
        setTimeout(() => {
            this.$refs.steps.active = 1;
        }, 10);
        this.getMessage();
    },
    mounted() { },
    methods: {
        submitForm() {
            this.$refs['workForm'].validate(valid => {
                if (valid) {
                    addCareer(this.workForm).then(res => { }).catch;
                }
            });
            this.$refs['contactForm'].validate(valid => {
                if (valid) {
                    addContact(this.contactForm).then(res => { }).catch;
                }
            });
            this.$refs['assetsForm'].validate(valid => {
                if (valid) {
                    addAsset(this.assetsForm).then(res => { }).catch;
                }
            });
            this.$refs['livingForm'].validate(valid => {
                if (valid) {
                    addLiving(this.livingForm).then(res => { }).catch;
                }
            });
            this.$refs['personForm'].validate(valid => {
                if (valid) {
                    setTimeout(() => {
                        addLoanUser(this.personForm).then(res => { }).catch;
                    }, 100);
                }
            });
            this.$router.replace({ path: "/loanApply3" });
        },
        getMessage() {
            findLoanUser().then(res =>{
                console.log(res.data);
                this.personForm = res.data;
                this.workForm = res.data.careerInfoId;
                this.assetsForm = res.data.assetInfoId;
                this.livingForm = res.data.livingInfoId;
                this.contactForm = res.data.contactInfoId;
                console.log(res.data.livingInfoId.livingSituation)
            }).catch();
        },
    }
}

</script>
<style>
.btn {
    margin-left: 60%;
}
</style>
  